import { Message } from 'semantic-ui-react'

export const meta = {
  title: 'Composition',
  prevPage: { title: 'Get Started', href: '/usage' },
  nextPage: { title: 'Shorthand Props', href: '/shorthand-props' },
}

## `as` prop

Semantic UI React provides a way to compose React components through the `as` prop. It allows to compose component features and props without adding extra nested components.

```jsx
<>
  {/* 🔨  Each Semantic UI React component has a default value for `as` prop */}
  {/* Will output: <button class='ui button' /> */}
  <Button />
  {/* Uses another tag: <a class='ui button' /> */}
  <Button as='a' />
</>
```

## Unhandled props & DOM attributes

Our components handle only props that are defined in their `propTypes`, all unhandled props are passed to the component you are rendering `as`. It means that all HTML props are supported on all components.

```jsx
// `type` is an unhandled prop on `Button` and will be passed through ⬇️
// Will output: <button class="ui button" type="submit" />
<Button type='submit' />
```

This is also essential for composing with third party libraries like `react-router`.

```jsx
import { Link } from 'react-router-dom'
import { Button } from 'semantic-ui-react'

// 💡 `to` prop is not handled in `Button` and will be passed to `Link` component
;<Button as={Link} to='/home'>
  To homepage
</Button>
```
